<template>
  <div class="about">
    <a-card title="预报" :bordered="false" style="width: 600px">
    <div id="pieChart" :style="{width: '500px', height: '400px'}"></div>
    </a-card>
    <a-card title="访问量" :bordered="false" style="width: 600px">
      <pie-echarts/>
    </a-card>
    
    <!-- <echartstem :weekTemplate="weekTemplate"/> -->
  </div>
</template>
<script>
import { reqFutureWeahter , reqCityname} from "../../api/index";
import { message } from "ant-design-vue";
import PieEcharts from "../../components/ECharts/PieEcharts";
import temoption from "../../config/temperatureECharts";
import storageUtil from '../../utils/storageUtil'
import {initAddress} from '../../utils/addressUtil'
export default {
  data() {
    return {
      weekTemplate: [],
      city:""
    };
  },
  components: {
    "pie-echarts":PieEcharts
  },
  created() {
    this.getWeather();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pieChart"));

      var day = [];
      var temH = [];
      var temL = [];
      this.weekTemplate.forEach(daytemplate => {
        day.push(daytemplate.day);
        temH.push(daytemplate.temH);
        temL.push(daytemplate.temL);
      });
      temoption.title.text = this.city+"温度预报"
      temoption.xAxis.data = day;
      temoption.series[0].data = temH;
      temoption.series[1].data = temL;
      // 绘制图表
      myChart.setOption(temoption);
    },
    async getWeather() {
      var coords = storageUtil.getCoords();
      console.log("getWeather")
      if (coords.latitude === undefined) {
        const coords = await initAddress();
      }
      const city = await reqCityname(coords);
      this.city = city.city;
      var thecity = city.city
     thecity = thecity.split("")
     thecity.pop()
      
      thecity = thecity.join("")
      const result = await reqFutureWeahter(thecity);
      if (result.reason == "查询成功!") {
        var data = result.result;
        var future = data.future;

        future.forEach(day => {
          var YMD = day.date.split("-");

          var tem = day.temperature.split("/");
          tem[1] = tem[1].split("");
          tem[1].pop();
          tem[1] = tem[1].join("");
          this.weekTemplate.push({ day: YMD[2], temH: tem[1], temL: tem[0] });
        });
      } else {
        message.error("获取天气信息失败!");
      }
      this.drawLine();
    }
  }
};
</script>
<style lang="stylus" scoped>
.about{
  display flex
  justify-content  space-between
}
</style>